<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly Demo: Single-direction Scrolling</title>
  <script src="./node_modules/blockly/blockly_compressed.js"></script>
  <script src="./node_modules/blockly/blocks_compressed.js"></script>
  <script src="./node_modules/blockly/msg/en.js"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .description {
      flex: 0 1 auto;
    }
    .demo {
      display: flex;
      flex-flow: column;
      height: 100%;
    }
    #blocklyDiv {
      flex: 1 1 auto;
    }
  </style>
</head>
<body>
  <div class="demo">
    <p class="description">This is a simple demo of configuring single-direction scrollbars.</p>

    <div id="blocklyDiv"></div>
  </div>

  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number">
      <field name="NUM">123</field>
    </block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>

  <script>
    var demoWorkspace = Blockly.inject('blocklyDiv',
        {
          media: 'https://unpkg.com/blockly/media/',
          toolbox: document.getElementById('toolbox'),
          grid:
              {
                spacing: 25,
                length: 3,
                colour: '#ccc',
                snap: true
              },
          move: {
            scrollbars: {
              vertical: true,
              horizontal: false
            }
          }
        });
  </script>

  </body>
</html>
